<template>
  <div class="main">
    <router-view/>
    <!-- 聊天音频 -->
    <audio id="chatAudio">
      <source src="../../static/audio/qq.wav"/>
    </audio>
    <!-- 订单音频 -->
    <audio id="orderAudio">
      <source src="../../static/audio/msg.wav"/>
    </audio>
  </div>
</template>

<script>
import {
  XHeader,
  Tabbar,
  TabbarItem
} from 'vux'
import { mapActions } from 'vuex'
import util from '../util/util'
import {
  getLink
} from '../api/api'
import moment from 'moment'
export default {
  name: 'main',
  components: {
    XHeader,
    Tabbar,
    TabbarItem
  },
  data () {
    return {}
  },
  watch: {
    '$store.state.chat.chatMessage' (message) {
      console.log(message)
      const user = this.$store.state.user
      const contact = this.$store.state.chat.contact
      if (!((message.senderId === user.uid && message.receiverId === contact.senderId) || (message.receiverId === user.uid && message.senderId === contact.senderId))) {
        const find = this.$store.state.chat.contacts.findIndex(contact => {
          return contact.senderId === message.senderId
        })
        if (find > -1) {
          this.$store.state.chat.contacts[find].noWriteNum += 1
          this.$store.state.chat.contactBadge += 1
          this.playChatAudio()
        }
      }
    },
    '$store.state.user.UserType' (type) {
      if (type === '5') {
        this.$router.push({
          path: '/main/order/bussinessOrder'
//          path: '/main/order/boxOrder'
        })
      }
    }
  },
  beforeCreate () {
    const user = util.getItem('$user')
    if (!user) {
      this.$router.push({
        path: '/login'
      })
    }
  },
  mounted () {
    let user = util.getItem('$user')
    if (user) {
      this.initApp(user)
      this.getContacts()
      this.initChatServer(user)
    } else {
      // 跳转登录页
      this.$router.push({
        path: '/login'
      })
    }
  },
  methods: {
    // 注册聊天服务
    initChatServer (user) {
      this.$store.state.chat.socket = new WebSocket('ws://47.101.133.86:86/websocket/' + user.uid)
      this.$store.state.chat.socket.onopen = evt => {
        console.log('聊天服务连接成功')
      }
      this.$store.state.chat.socket.onclose = evt => {
        console.log('聊天服务关闭')
      }
      this.$store.state.chat.socket.onerror = evt => {
        console.log('聊天服务连接错误')
      }
      this.$store.state.chat.socket.onmessage = evt => {
        const data = JSON.parse(evt.data)
        // 聊天信息
        if (data.hasOwnProperty('chatMsg') && data.chatMsg.length) {
          const msg = data.chatMsg[0]
          this.$store.state.chat.chatMessage = msg
        }
        // 我的运单
        if (data.hasOwnProperty('common') && data.common.length) {
          const mydata = data.common[0]
          if (mydata.msg) {
            this.$store.state.order.updBlUnix = moment().valueOf()
            this.playChatAudio()
          }
        }
      }
    },
    getContacts () {
      const user = this.$store.state.user
      getLink({}).then(res => {
        if (res.status === 200) {
          const data = res.data
          const contacts = []
          this.$store.state.chat.contactBadge = 0
          data.map(item => {
            if (item.senderId !== user.uid) {
              this.$store.state.chat.contactBadge += item.noWriteNum
              contacts.push(item)
            }
          })
          this.$store.state.chat.contacts = contacts
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    },
    ...mapActions({
      initApp: 'app/initApp',
      getBusinessList: 'order/getBusinessList'
    })
  }
}
</script>

<style lang="less">
  .main{
    padding-top: 46px;
    .app-tabbar{
      position: fixed !important;
    }
  }
</style>
